<%@ include file="header.jsp"%>


<!-- start: Content -->
<div id="content" class="span10">


    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="index.html">Home</a> 
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="#">Dashboard</a></li>
    </ul>

    <div class="row-fluid">

        <div class="span3 statbox purple" onTablet="span6" onDesktop="span3">
            <div class="boxchart">5,6,7,2,0,4,2,4,8,2,3,3,2</div>
            <div class="number">854<i class="icon-arrow-up"></i></div>
            <div class="title">Stok susu</div>
            <div class="footer">
                <a href="#"> read full report</a>
            </div>	
        </div>
        <div class="span5 statbox green" onTablet="span6" onDesktop="span3">
            <div class="boxchart">1,2,6,4,0,8,2,4,5,3,1,7,5</div>
            <div class="number"><%out.print(50);%><i class="icon-arrow-up"></i></div>
            <div class="title">Penjualan</div>
            <div class="footer">
                <a href="#"> read full report</a>
            </div>
        </div>
        <div class="span5 statbox blue noMargin" onTablet="span6" onDesktop="span3">
            <div class="boxchart">5,6,7,2,0,-4,-2,4,8,2,3,3,2</div>
            <div class="number">982<i class="icon-arrow-up"></i></div>
            <div class="title">Pengadaan</div>
            <div class="footer">
                <a href="#"> read full report</a>
            </div>
        </div>

        <div class="span3 statbox red" onTablet="span6" onDesktop="span3">
            <div class="boxchart">7,2,2,2,1,-4,-2,4,8,,0,3,3,5</div>
            <div class="number">678<i class="icon-arrow-down"></i></div>
            <div class="title">Profit</div>
            <div class="footer">
                <a href="#"> read full report</a>
            </div>
        </div>	
    </div>		




    <div class="row-fluid">



        </div><!--/span-->

 <div id="chartContainer" style="height: 45%; width: 100%;">
        </div>


        <div class="row-fluid sortable">

<!--            <div class="box span6">
                <div class="box-header">
                    <h2><i class="halflings-icon list-alt"></i><span class="break"></span>Pie</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <div id="piechart" style="height:300px"></div>
                </div>
            </div>-->
            
<!--            <div class="box span6">
                <div class="box-header"  data-original-title>
                    <h2><i class="halflings-icon list-alt"></i><span class="break"></span>Pie</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
                    </div>
                </div>
                <div class="box-content ">
                    <div id="chartContainer" style="height: 300px"></div>
                    <div id="piechart" style="height:300px"></div>
                </div>
            </div>
            
            <div class="box span6">
                <div class="box-header" data-original-title>
                    <h2><i class="halflings-icon list-alt"></i><span class="break"></span>Donut</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
                    </div>
                </div>
                <div class="widget box-content blue">
                    <div id="donut-example" style="height:300px"></div>s
                </div>
            </div>-->

        </div><!--/row-->

    </div>



    <!--/row-->



</div><!--/.fluid-container-->

<!-- end: Content -->
</div><!--/#content.span10-->
</div><!--/fluid-row-->


<div class="clearfix"></div>

<footer>

    <p>
        <span style="text-align:left;float:left">&copy; 2013 <a href="http://jiji262.github.io/Bootstrap_Metro_Dashboard/" alt="Bootstrap_Metro_Dashboard">Bootstrap Metro Dashboard</a></span>

    </p>

</footer>

<!-- start: JavaScript-->
<script type="text/javascript" src="js/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var chart = new CanvasJS.Chart("chartContainer",
                {
                    title: {
                        text: "Penjualan Susu"
                    },
                    data: [
                        {
                            dataPoints: [
                                {x: 10, y: 297571, label: "Januari"},
                                {x: 20, y: 267017, label: "Februari"},
                                {x: 30, y: 175200, label: "Maret"},
                                {x: 40, y: 154580, label: "April"},
                                {x: 50, y: 116000, label: "Mei"},
                                {x: 60, y: 97800, label: "Juni"},
                                {x: 70, y: 20682, label: "Juli"},
                                {x: 80, y: 20350, label: "Agustus"},
                                {x: 90, y: 29571, label: "September"},
                                {x: 100, y: 26017, label: "Oktober"},
                                {x: 110, y: 17500, label: "Nopember"},
                                {x: 120, y: 15480, label: "Desember"},
                            ]
                        }
                    ]
                });5

        chart.render();
    }
</script>
<script src="js/raphael-min.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/morris-0.4.1.min.js"></script> 
<script> /*
 * Play with this code and it'll update in the panel opposite.
 *
 * Why not try some of the options above?
 */
    Morris.Donut({
        element: 'donut-example',
        data: [
            {label: "Download Sales", value: <%out.print("10");%>},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ],
        labelColor: '#060',
        colors: [
            '#39B580',
            '#000000',
            '#67C69D',
        ]
    });
</script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>

<script src="js/jquery-ui-1.10.0.custom.min.js"></script>

<script src="js/jquery.ui.touch-punch.js"></script>

<script src="js/modernizr.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/jquery.cookie.js"></script>

<script src='js/fullcalendar.min.js'></script>

<script src='js/jquery.dataTables.min.js'></script>

<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

<script src="js/jquery.chosen.min.js"></script>

<script src="js/jquery.uniform.min.js"></script>

<script src="js/jquery.cleditor.min.js"></script>

<script src="js/jquery.noty.js"></script>

<script src="js/jquery.elfinder.min.js"></script>

<script src="js/jquery.raty.min.js"></script>

<script src="js/jquery.iphone.toggle.js"></script>

<script src="js/jquery.uploadify-3.1.min.js"></script>

<script src="js/jquery.gritter.min.js"></script>

<script src="js/jquery.imagesloaded.js"></script>

<script src="js/jquery.masonry.min.js"></script>

<script src="js/jquery.knob.modified.js"></script>

<script src="js/jquery.sparkline.min.js"></script>

<script src="js/counter.js"></script>

<script src="js/retina.js"></script>

<script src="js/custom.js"></script>
<!-- end: JavaScript-->

</body>
</html>
